<template >
  <div>
    <avue-crud
      v-model="form"
      :option="option"
      @row-save="rowSave"
      v-model:page="page"
      v-model:search="search"
      @row-update="rowUpdate"
      @row-del="rowDel"
      :data="dataList"
      @selection-change="selectionChange"
      @search-change="searchChange"
      @on-load="onLoad"
    >
      <template #menu-left="{}">
        <el-button type="danger" icon="el-icon-plus" @click="exportss"
          >导出</el-button
        >
      </template>
      <template #menu-right="{}">
        <el-upload
          @change="importData"
          v-model:file-list="fileList"
          class="upload-demo"
          :auto-upload="false"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          multiple
        >
          <el-button type="primary">导入</el-button>
        </el-upload>
      </template>
      <template #status="scope">
        <!-- {{ console.log(scope) }} -->
        <el-switch v-model="scope.row.status"></el-switch>
      </template>
    </avue-crud>
  </div>
</template>
  
<script setup>
import { ref, onMounted } from "vue";
import axios from "@/utils/axios";
import { ElMessage } from "element-plus";
import * as XLSX from "xlsx";
const ExportJsonExcel = require("js-export-excel");
const option = ref(null);
const data = ref(null);
const form = ref({});
//   const value1 = ref([]);
//   const value = ref("全部");
const dataList = ref(null);
const flag = ref(true);

onMounted(() => {
  // 请求数据
  axios.get("/getList").then((res) => {
    console.log(res);
    dataList.value = res.data.data.slice(0, 10);
    page.value.total = res.data.data.length;
    data.value = res.data.data;
  });
});
// 分页配置
const page = ref({
  total: 50,
  currentPage: 1,
  pageSize: 10,
  pageSizes: [10, 20, 30],
});
option.value = {
  index: false,
  column: [
    {
      label: "ID",
      prop: "id",
    },
    {
      label: "车站",
      prop: "type",
      search: true,
      searchValue: "",
    },
    {
      label: "状态",
      prop: "status",
      type: "switch",
      slot: true,
      dicData: [
        {
          label: "废除",
          value: "0",
        },
        {
          label: "启用",
          value: "1",
        },
      ],
    },
  ],
};
data.value = [];

// 搜索
const searchChange = (val) => {
  console.log(val.type);
  const arr = [];

  data.value.filter((item) => {
    if (item.type.includes(val.type)) {
      return arr.push(item);
    }
  });
  dataList.value = arr;
  // console.log(data.value);
};

// 分页
const onLoad = (page) => {
  page.total = data.value.length;
  if (page.currentPage === 1) {
    dataList.value = data.value.slice(
      (page.currentPage - 1) * 10,
      page.currentPage * 10
    );
  } else if (page.currentPage === 2) {
    dataList.value = data.value.slice(
      (page.currentPage - 1) * 10,
      page.currentPage * 10
    );
  }
};

// 导出
const exportss = () => {
  console.log(1);
  var option = {};
  option.fileName = "表格"; //文件名
  option.datas = [
    {
      //第一个sheet（第一个excel表格）
      sheetData: dataList.value, //数据
      sheetName: "sheet",
      sheetFilter: ["id", "type", "status"], //表头数据对应的sheetData数据
      sheetHeader: ["ID", "车站", "状态"], //表头数据
      columnWidths: ["8", "8"], // 列宽
    },
  ];
  var toExcel = new ExportJsonExcel(option);
  toExcel.saveExcel();
};

// 导入
const importData = (file) => {
  console.log(file.raw);
  const fileReader = new FileReader(); // 创建FileReader 对象 读取文件
  console.log(fileReader);
  fileReader.onload = (e) => {
    console.log(e);
    const { result } = e.target;
    // 二进制读取 excel表格对象
    const workList = XLSX.read(result, { type: "binary" });
    console.log(workList);
    // // 存储数据
    let data = [];
    for (let sheet in workList.Sheets) {
      // 利用 sheet_to_json 方法将 excel 转成 json 数据
      data = data.concat(XLSX.utils.sheet_to_json(workList.Sheets[sheet]));
      console.log(sheet);
    }
    const tableData = data.map((item) => {
      return {
        id: item["ID"],
        type: item["车站"],
        state: item["状态"],
      };
    });
    dataList.value = dataList.value.concat(tableData);
  };
  fileReader.readAsBinaryString(file.raw);
};
function rowSave(row, done, loading) {
  console.log(row, done);
  ElMessage({
    message: "新建成功",
    type: "success",
  });
  done(row);
}
function rowDel(row, index, done) {
  ElMessage({
    message: "删除成功",
    type: "success",
  });
  done(row);
}
function rowUpdate(row, index, done, loading) {
  ElMessage({
    message: "编辑成功",
    type: "success",
  });
  done(row);
}
</script>
  
<style scoped>
.block {
  width: 450px;
}

.avue-crud__left {
  width: 100%;
  display: flex !important;
  justify-content: space-around;
}

.type {
  width: 150px;
}
</style>
  